<template>
  <el-card class="content">
    <el-row style="margin-top: 0.1rem">
      <el-col :span="5">
        <el-form label-width="0.3rem">
          <el-form-item label="物品:">
            <el-input size="mini" v-model="searchString"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="1" style="margin-left: 0.1rem">
        <el-button type="primary" size="small" @click="search">查询</el-button>
      </el-col>
      <el-col :span="1" style="margin-left: 0.1rem">
        <el-button type="primary" size="small" @click="add">新增</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      stripe
      style="overflow: auto"
      v-loading="loading"
      class="el-table-box"
    >
      <el-table-column label="序号" type="index" width="80"> </el-table-column>
      <el-table-column prop="name" label="物品"> </el-table-column>
      <el-table-column prop="unit" label="单位"> </el-table-column>
      <el-table-column prop="quantity" label="数量"> </el-table-column>
      <el-table-column prop="standards" label="规格"> </el-table-column>
      <el-table-column prop="location" label="存放位置"> </el-table-column>
      <el-table-column prop="remark" label="备注"> </el-table-column>
      <el-table-column prop="date" label="操作">
        <template slot-scope="scoped">
          <el-button @click="modify(scoped.row.id)" type="text" size="small"
            >修改</el-button
          >
          <el-button @click="deleteData(scoped.row.id)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-pagination
        class="card--pagination"
        :page-sizes="[10, 15]"
        :page-size="currentSize"
        :current-page.sync="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-row>
    <modify-and-add-dialog
      ref="modifyAndAddDialog"
      @refresh="init"
    ></modify-and-add-dialog>

    <!--    <el-card class="try">-->
    <!--      <h1>这是一段遮罩层的文字</h1>-->
    <!--    </el-card>-->
  </el-card>
</template>

<script>
import ModifyAndAddDialog from "~/views/safety-management/emergency-management/emergency-material-management/ModifyAndAddDialog";
import {
  getEmergencyMaterialManagementData,
  deleteEmergencyMaterial,
  count,
  searchEmergencyMaterial,
} from "~/interface/safeManagement/ContingencyManagement";
export default {
  name: "EmergencyMaterialManagement",
  components: { ModifyAndAddDialog },
  data() {
    return {
      tableData: [],
      currentSize: 5,
      currentPage: 1,
      total: 10,
      loading: true,
      searchString: null,
    };
  },
  methods: {
    async init() {
      try {
        this.tableData = await getEmergencyMaterialManagementData(
          this.currentPage - 1,
          this.currentSize
        );
      } catch (err) {
        this.$notify.error({
          title: "表格加载失败",
          message: err,
        });
        console.log(err);
      } finally {
        this.loading = false;
      }

      this.total = await count();
    },
    add() {
      this.$refs.modifyAndAddDialog.init(0);
    },
    modify(id) {
      this.$refs.modifyAndAddDialog.init(id);
    },
    async search() {
      try {
        this.tableData = await searchEmergencyMaterial(
          this.currentPage - 1,
          this.currentSize,
          this.searchString
        );
        this.total = this.tableData.length;
      } catch (err) {
        this.$message({
          type: "error",
          message: "查询失败",
        });
      }
    },
    deleteData(id) {
      this.$confirm("你确定要删除本项纪录吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            let result = await deleteEmergencyMaterial(id);
            console.log(result);
            if (Number(result.resultCode) !== 200) {
              instance.confirmButtonLoading = false;
              done();
              throw "删除失败";
            } else {
              instance.confirmButtonLoading = false;
              await this.init();
              done();
            }
          }
          done();
        },
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch((err) => {
          // console.log(err)
        });
    },
    handleSizeChange(val) {
      this.currentSize = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  watch: {
    searchString(val) {
      if (val.replace(/(^s*)|(s*$)/g, "").length === 0) {
        this.init();
      }
    },
  },
};
</script>

<style scoped>
.content {
  margin-right: 5px;
  height: 87vh;
}
.card--pagination {
  margin-top: 0.2rem;
}
/*.try{*/
/*  position: absolute;*/
/*  top: 0;left: 0;z-index: 100;*/
/*}*/
.el-table-box {
  /* margin-bottom: 20px; */
  display: block;
  height: 66vh;
  overflow-y: auto;
}
</style>
